<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input class="input" type="text" v-model="addressData.FConsignee" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="addressData.FPhone" placeholder="收货人手机号码" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">地区</text>
			<!-- <text @click="chooseLocation" class="input">
				{{addressData.FPrCityArea}}
			</text>
			<text class="yticon icon-shouhuodizhi"></text> -->
			<!-- <input class="input" type="text" v-model="addressData.FPrCityArea" placeholder="地址" placeholder-class="placeholder" /> -->
			<view @tap="togglePopup('bottom','popup')" class="input" >
				<view v-for="(item, index) in selectList" :key="index" style="display: inline-block;" >
					{{item.txt}}<span v-show="index == 0 || index == 1">—</span>
				</view>
			</view>
			<uni-popup ref="popup" :type="type" @change="change">
				<view class="select-border">
					<view class="header">
						<view class="title">
							选择地区
						</view>
						<view class="cancel-icon" @tap="cancel('popup')">
							X
						</view>
					</view>
					<view class="select-box">
						<view class="select-item">
							<view class="select-list" @tap="tabEvent(index)" :class="indexTab == index ? 'selected' : ''" v-for="(item, index) in selectList"
							 :key="index">
								{{item.txt}}
							</view>
						</view>
						<view class="select-item-box">
							<!-- 省 -->
							<view class="province-box" v-show="proviceShow">
								<view class="select-list-cont" @tap="provinceEvent(item,index)" v-for="(item,index) in provinceData" :key="item.code">
									{{item.name}}<span class="check" v-show="index == checkOne">√</span>
								</view>
							</view>
							<!-- 市 -->
							<view class="city-box" v-show="cityShow">
								<view class="select-list-cont" @tap="cityEvent(item,index)" v-for="(item,index) in cityData" :key="item.code">
									{{item.name}}<span class="check" v-show="index==checkTwo">√</span>
								</view>
							</view>
							<!-- 区 -->
							<view class="area-box" v-show="areaShow">
								<view class="select-list-cont" @tap="areaEvent(item,index)" v-for="(item,index) in areaData" :key="item.code">
									{{item.name}}<span class="check" v-show="index==checkThree">√</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<view class="row b-b"> 
			<text class="tit">门牌号</text>
			<input class="input" type="text" v-model="addressData.FAddress" placeholder="楼号、门牌" placeholder-class="placeholder" />
		</view>
		
		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="addressData.FDefault" color="#fa436a" @change="switchChange" />
		</view>
		<button class="add-btn" @click="confirm">提交</button>
	</view>
</template>

<script>
	import cityDatas from '../../utils/city.area.js'
	import uniPopup from '@/components/uni-pop.vue'
	let manageType = '';
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				addressData: {
					FConsignee: '',
					FPhone: '',
					FPrCityArea: '',
					FAddress: '',
					FDefault: false
				},
				//地址选择器
				provinceData: cityDatas,
				cityData: [],
				areaData: [],
				selectList: [{
					txt: '请选择'
				}, {
					txt: '请选择'
				}, {
					txt: '请选择'
				}],
				tabOne: '请选择',
				indexTab: 0,
				proviceShow: true,
				areaShow: false,
				cityShow: false,
				show: false,
				type: '',
				checkOne: null,
				checkTwo: null,
				checkThree: null,
			}
		},
		onLoad(option){
			let title = '新增收货地址';
			console.log(option)
			if(option.type==='edit'){
				title = '编辑收货地址'	
				this.addressData = JSON.parse(option.data)
				let befault = this.addressData.FDefault;
				this.addressData.FDefault = befault==1? true : false;
				console.log(this.addressData,befault);
				for(var i in this.provinceData){
					if(this.addressData.FPrvID == this.provinceData[i].code){
						this.selectList[0].txt = this.provinceData[i].name;
						this.selectList[0].code = this.provinceData[i].code;
						let cityList = this.provinceData[i].cityList;
						for(var j in cityList){
							if(this.addressData.FCityID == cityList[j].code){
								this.selectList[1].txt = cityList[j].name;
								this.selectList[1].code = this.provinceData[i].code;
								let areaList = cityList[j].areaList;
								for(var k in areaList){
									if(this.addressData.FAreaID == areaList[k].code){
										this.selectList[2].txt = areaList[k].name
										this.selectList[2].code = this.provinceData[i].code;
									}
								}
							}
						}
					}
				}
			}
			manageType = option.type;
			uni.setNavigationBarTitle({
				title
			})
		},
		methods: {
			switchChange(e){
				console.log(e.detail.value);
				this.addressData.FDefault = e.detail.value;
			},
			
			//地图选择地址
			chooseLocation(){
				uni.chooseLocation({
					success: (data)=> {
						this.addressData.FPrCityArea = data.name;
						// this.addressData.FAddress = data.name;
					}
				})
			},
			
			//提交
			confirm(){
				let data = this.addressData;
				if(!data.FConsignee){
					this.$api.msg('请填写收货人姓名');
					return;
				}
				if(!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.FPhone)){
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				if(!data.FPrCityArea){
					this.$api.msg('请选择所在区域');
					return;
				}
				if(!data.FAddress){
					this.$api.msg('请填写门牌号信息');
					return;
				}
				
				//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
				// this.$api.prePage().refreshList(data, manageType);
				// "FPhone":"手机号码",
				// "FAddress":"详细地址",
				// "FZipcode":"邮编",
				// "FConsignee":"收件人",
				// "FPrCityArea":"城市区域(广东广州天河)",
				
				// "itemid":data.FItemID,
				console.log(data.FDefault);
				let url = '',
					AddressData = {
						"FPhone":data.FPhone,
						"FAddress":data.FAddress,
						"FZipcode":"525300",
						"FConsignee":data.FConsignee,
						"FPrCityArea":data.FPrCityArea,
						'FDefault': data.FDefault,
						"FPrvID": this.selectList[0].code,
						"FCityID": this.selectList[1].code,
						"FAreaID": this.selectList[2].code,
					};
				manageType =='edit'?url='WxUserInfo/UpdateAddress':url='WxUserInfo/AddAddress';
				if(manageType =='edit'){
					AddressData.itemid = data.FItemID;
				}
				this.$util.util(url,AddressData,'POST').then(res=>{
					console.log(res);
					
					this.$api.msg(`地址${manageType=='edit' ? '修改': '添加'}成功`);
					setTimeout(()=>{
						uni.navigateBack()
					}, 800)
				});
			},
			
			//地址选择器
			togglePopup(type, open) {
				console.log(type,open)
				this.type = type
				if (open === 'tip') {
					this.show = true
				} else {
					this.$refs[open].open()
				}
				console.log(this.selectList,this);
			},
			cancel(type) {
				console.log(type)
				if (type === 'tip') {
					this.show = false
					return
				}
				this.$refs[type].close()
			},
			change(e) {
				console.log(e)
				if (e.show == true) {
					uni.hideTabBar()
				} else {
					uni.showTabBar()
				}
			},
			tabEvent(index) {
				this.indexTab = index
				if (this.indexTab == 0) {
					this.proviceShow = true
					this.cityShow = false
					this.areaShow = false
					// this.checkOne = null
					this.checkTwo = null
					this.checkThree = null
					// this.cityData = []
					this.areaData = []
					// this.selectList[0].txt = "请选择"
					this.selectList[1].txt = "请选择"
					this.selectList[2].txt = "请选择"
					console.log(this.selectList);
				} else if (this.indexTab == 1) {
					this.proviceShow = false
					this.cityShow = true
					this.areaShow = false
					// this.checkTwo = null
					this.checkThree = null
					// this.areaData = []
					// this.selectList[1].txt = "请选择"
					this.selectList[2].txt = "请选择"
					console.log(this.selectList);
				} else if (this.indexTab == 2) {
					this.proviceShow = false
					this.cityShow = false
					this.areaShow = true
					console.log(this.selectList);
				}
			},
			provinceEvent(data, index) {
				this.checkOne = index
				this.selectList[0].txt = data.name//名称
				this.selectList[0].code = data.code//id
				this.indexTab = 1
				this.proviceShow = false
				this.cityShow = true
				this.areaShow = false
				this.cityData = data.cityList
				console.log(this.cityData,data);
			},
			cityEvent(data, index) {
				this.checkTwo = index
				this.selectList[1].txt = data.name//名称
				this.selectList[1].code = data.code//id
				this.indexTab = 2
				this.proviceShow = false
				this.cityShow = false
				this.areaShow = true
				this.areaData = data.areaList
				console.log(this.areaData,data);
			},
			areaEvent(data, index) {
				this.checkThree = index
				this.selectList[2].txt = data.name//名称
				this.selectList[2].code = data.code//id
				this.addressData.FPrCityArea = this.selectList[0].txt+this.selectList[1].txt+this.selectList[2].txt
				console.log(this.addressData.FPrCityArea);
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height: 110upx;
		background: #fff;
		
		.tit{
			flex-shrink: 0;
			width: 120upx;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: $font-color-light;
		}
	}
	.default-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
	
	//地址选择器
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 35upx;
	}
	
	.title {
		font-size: 34upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}
	
	.cancel-icon {
		font-size: 34upx;
		color: rgba(153, 153, 153, 1);
	}
	
	.check {
		padding-left: 17upx;
		color: #FF7E28;
	}
	
	.select-box {
		height: 1024upx;
	}
	
	.select-item {
		display: flex;
		align-items: center;
		padding-left: 50upx;
		margin-bottom: 20upx;
		border-bottom: 1px solid #F6F6F6;
	}
	
	.select-list {
		width: 120upx;
		height: 40upx;
		text-align: center;
		overflow: hidden;
		/*超出部分隐藏*/
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		white-space: nowrap;
		/*规定段落中的文本不进行换行 */
		font-size: 30upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		margin-right: 30upx;
		border-bottom: 1px solid #FFFFFF;
	}
	
	.select-list-cont {
		padding-left: 67upx;
		font-size: 30upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 40px;
	}
	
	.selected {
		border-bottom: 1px solid #F0AD4E;
		color: rgba(255, 133, 0, 1);
	}
</style>
